<script>
import {mapState,mapMutations,mapGetters} from "vuex";
export default {
  name: "App",
  computed:{
    ...mapState(["liuXiaoLe","shenXiaoXu","renYiHao","geBinJie"]),
    // ...mapGetters(["sum"]),
    ...mapGetters({
      sum2:"sum"
    }),
    sum(){
      return this.$store.state.liuXiaoLe+this.shenXiaoXu+this.renYiHao+this.geBinJie
    }
  },
  // 混用
  methods:{
    ...mapMutations(["SET_REN_YI_HAO"]),
    ...mapMutations({
      setShenXiaoXu:"SET_SHEN_XIAO_XU"
    })
  }
}
</script>

<template>
  <div>
    <h3>总票数：{{liuXiaoLe+shenXiaoXu+renYiHao+geBinJie}}</h3>
    <h3>总票数：{{sum}}</h3>
    <h3>总票数：{{$store.getters.sum}}</h3>
    <h3>总票数：{{sum2}}</h3>
    <hr/>
    <!--    不建议直接修改数据状态，要将所有的操作行为进行集中式管理，修改数据状态交给mutaion    -->
    <!--        <button @click="$store.state.liuXiaoLe++">刘小乐：{{$store.state.liuXiaoLe}}|{{liuXiaoLe}}</button>-->
    <button @click="$store.commit('SET_LIU_XIAO_LE',1)">刘小乐：{{$store.state.liuXiaoLe}}|{{liuXiaoLe}}</button>
    <button @click="$store.commit('SET_GE_BIN_JIE')">戈斌杰：{{$store.state.geBinJie}}|{{geBinJie}}</button>
    <button @click="SET_REN_YI_HAO(3)">任逸豪：{{$store.state.renYiHao}}|{{renYiHao}}</button>
    <button @click="setShenXiaoXu(100)">沈晓旭：{{$store.state.shenXiaoXu}}|{{shenXiaoXu}}</button>
  </div>
</template>

<style scoped>
button{
  padding:5px;
  margin:5px;
}
</style>